<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../fontawesome-5.15.4/css/all.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="black-nav">
    <div class="wrap">
        <ul class="black-left">
            <li>
                <a href="#">小米商城</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">MIUI</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">loT</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">云服务</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">天星科技</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">有品</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">小爱云开发平台</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">企业团购</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">资质证明</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">协议规则</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">下载APP</a>
                <span>|</span>
                <div class="download">
                    <img src="./img/download.png" alt="">
                    <p>小米商城app</p>
                </div>
                <div class="stri"></div>
            </li>
            <li>
                <a href="#">智能生活</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">SelectLocation</a>
            </li>
        </ul>
        <ul class="black-right">
            <li>
                <a href="#">登陆</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">注册</a>
                <span>|</span>
            </li>
            <li>
                <a href="#">消息通知</a>
                <span>|</span>
            </li>
            <li class="cart">
                <a href="#">
                    <i class="fas fa-cart-plus"></i>
                    <i>购物车（0）</i>
                </a>
                <div class="cart-list">
                    购物车中还没有商品，赶快选购吧！
                </div>
            </li>
        </ul>
    </div>
</div>

<div class="white-nav">
    <div class="wrap">
        <div class="logo">
            <img class="mi-home" src="./img/mi-home.png" alt="">
            <img class="mi-logo" src="./img/mi-logo.png" alt="">
        </div>
        <div class="nav-bar">
            <ul>
                <li>
                    <a href="#">
                        <!--<img src="./img/icon-slides.png" alt="">-->
                    </a>
                </li>
                <li>
                    <a href="#">小米手机</a>
                    <!--弹出层-->
                    <div class="goods-info">
                        <div class="wrap">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="./img/mi15.webp" alt="">
                                        </div>
                                        <p class="name">Xiaomi 15</p>
                                        <p class="price">4999元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="./img/mi15.webp" alt="">
                                        </div>
                                        <p class="name">Xiaomi 15</p>
                                        <p class="price">4999元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="./img/mi15.webp" alt="">
                                        </div>
                                        <p class="name">Xiaomi 15</p>
                                        <p class="price">4999元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="./img/mi15.webp" alt="">
                                        </div>
                                        <p class="name">Xiaomi 15</p>
                                        <p class="price">4999元起</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="./img/mi15.webp" alt="">
                                        </div>
                                        <p class="name">Xiaomi 15</p>
                                        <p class="price">4999元起</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="元宇宙">
            <button class="fas fa-search"></button>
        </div>
    </div>
</div>
<!--banner区域-->
<div class="banner">
    <div class="wrap">
        <img class="banner-img" src="./img/banner1.jpg" alt="">
        <div class="slide">
            <ul>
                <li>
                    <a href="#">
                        手机
                        <i class="fas fa-angle-right"></i>
                    </a>
                    <div class="slide-list">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./img/mi15.webp" alt="">
                                    <span>小米手机</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./img/mi15.webp" alt="">
                                    <span>小米手机</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./img/mi15.webp" alt="">
                                    <span>小米手机</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./img/mi15.webp" alt="">
                                    <span>小米手机</span>
                                </a>
                            <li>
                                <a href="#">
                                    <img src="./img/mi15.webp" alt="">
                                    <span>小米手机</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#">
                        电视
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        电脑
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        笔记本
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        台式机
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        电话卡
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        台式机
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        台式机
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        台式机
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
                <li>
                    <a href="#">
                        台式机
                        <i class="fas fa-angle-right"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--广告区域-->
<div class="ad">
    <div class="wrap">
        <div class="ad-aside">
            <ul>
                <li><a href="#">
                    <i class="fas fa-sd-card"></i>
                    <p>米粉卡</p>
                </a></li>
                <li><a href="#">
                    <i class="fas fa-sd-card"></i>
                    <p>米粉卡</p>
                </a></li>
                <li><a href="#">
                    <i class="fas fa-sd-card"></i>
                    <p>米粉卡</p>
                </a></li>
                <li><a href="#">
                    <i class="fas fa-sd-card"></i>
                    <p>米粉卡</p>
                </a></li>
                <li><a href="#">
                    <i class="fas fa-sd-card"></i>
                    <p>米粉卡</p>
                </a></li>
                <li><a href="#">
                    <i class="fas fa-sd-card"></i>
                    <p>米粉卡</p>
                </a></li>
            </ul>
        </div>
        <div class="ad-img">
            <a href="#">
                <img src="./img/1.jpg" alt="">
            </a>
        </div>
        <div class="ad-img">
            <a href="#">
                <img src="./img/2.jpg" alt="">
            </a>
        </div>
        <div class="ad-img">
            <a href="#">
                <img src="./img/3.jpg" alt="">
            </a>
        </div>
    </div>
</div>
<!--内容模块-->
<div class="content">
    <div class="wrap">
        <!--手机模块-->
        <div class="phone">
            <h3 class="title">手机</h3>
            <div class="phone-box">
                <div class="phone-box-left">
                    <a href="#">
                        <img src="./img/phone.webp" alt="">
                    </a>
                </div>
                <div class="phone-box-right">
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img src="./img/phone-right.webp" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头｜骁龙®8至尊版移动平台｜5400mAh 小米金沙江电池 小米澎湃OS 2</p>
                            <p class="item-price">4999元</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="big-img">
            <a href="#">
                <img src="./img/ad.webp" alt="">
            </a>
        </div>

        <!--家电模块-->
        <div class="elc">
            <h3 class="title">家电</h3>
            <!--家电列表-->
            <div class="elc-box">
                <div class="item elc-item">
                    <img src="./img/elc-left.webp" alt="">
                </div>
                <div class="item">
                    <a href="#">
                        <img class="item-img" src="./img/elc-right.webp" alt="">
                        <p class="item-name">Redmi 智能电视 X 2025款</p>
                        <p class="item-desc">240Hz竞技模式|4+64GB|全色温双色域色准管控</p>
                        <p class="item-price">2599元<del>2799元</del></p>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="item-img" src="./img/elc-right.webp" alt="">
                        <p class="item-name">Redmi 智能电视 X 2025款</p>
                        <p class="item-desc">240Hz竞技模式|4+64GB|全色温双色域色准管控</p>
                        <p class="item-price">2599元<del>2799元</del></p>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="item-img" src="./img/elc-right.webp" alt="">
                        <p class="item-name">Redmi 智能电视 X 2025款</p>
                        <p class="item-desc">240Hz竞技模式|4+64GB|全色温双色域色准管控</p>
                        <p class="item-price">2599元<del>2799元</del></p>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="item-img" src="./img/elc-right.webp" alt="">
                        <p class="item-name">Redmi 智能电视 X 2025款</p>
                        <p class="item-desc">240Hz竞技模式|4+64GB|全色温双色域色准管控</p>
                        <p class="item-price">2599元<del>2799元</del></p>
                    </a>
                </div>
                <div class="item elc-item">
                    <img src="./img/elc-left.webp" alt="">
                </div>

                <div class="item">
                    <a href="#">
                        <img class="item-img" src="./img/elc-right.webp" alt="">
                        <p class="item-name">Redmi 智能电视 X 2025款</p>
                        <p class="item-desc">240Hz竞技模式|4+64GB|全色温双色域色准管控</p>
                        <p class="item-price">2599元<del>2799元</del></p>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="item-img" src="./img/elc-right.webp" alt="">
                        <p class="item-name">Redmi 智能电视 X 2025款</p>
                        <p class="item-desc">240Hz竞技模式|4+64GB|全色温双色域色准管控</p>
                        <p class="item-price">2599元<del>2799元</del></p>
                    </a>
                </div>
                <div class="item">
                    <a href="#">
                        <img class="item-img" src="./img/elc-right.webp" alt="">
                        <p class="item-name">Redmi 智能电视 X 2025款</p>
                        <p class="item-desc">240Hz竞技模式|4+64GB|全色温双色域色准管控</p>
                        <p class="item-price">2599元<del>2799元</del></p>
                    </a>
                </div>
                <div class="item-last">
                    <div class="item-small">
                        <a href="#">
                            <div class="left">
                                <p class="item-name">米家冰箱无霜两门186L</p>
                                <p class="item-price">1199元</p>
                            </div>
                            <div class="right">
                                <img src="./img/elc-small.webp" alt="">
                            </div>
                        </a>
                    </div>
                    <div class="item-more">
                        <a href="#">
                            <div class="left">
                                <h1>浏览更多</h1>
                                <p>热门</p>
                            </div>
                            <div class="right">
                                <i class="fas fa-arrow-alt-circle-right"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="big-img">
            <a href="#">
                <img src="./img/ad.webp" alt="">
            </a>
        </div>

        <!--视频模块-->
        <div class="video">
            <h3 class="title">视频</h3>
            <div class="video-box">
                <div>
                    <div class="video-img">
                        <img src="./img/mi15.webp" alt="">
                        <div class="btn">
                            <div class="sanjiao">

                            </div>
                        </div>
                    </div>
                    <p class="video-name">
                        Redmi 10X系列发布会
                    </p>
                    <p class="video-desc">
                        Redmi 10X系列发布会
                    </p>
                </div>
                <div>
                    <div class="video-img">
                        <img src="./img/mi15.webp" alt="">
                        <div class="btn">
                            <div class="sanjiao">

                            </div>
                        </div>
                    </div>
                    <p class="video-name">
                        Redmi 10X系列发布会
                    </p>
                    <p class="video-desc">
                        Redmi 10X系列发布会
                    </p>
                </div>
                <div>
                    <div class="video-img">
                        <img src="./img/mi15.webp" alt="">
                        <div class="btn">
                            <div class="sanjiao">

                            </div>
                        </div>
                    </div>
                    <p class="video-name">
                        Redmi 10X系列发布会
                    </p>
                    <p class="video-desc">
                        Redmi 10X系列发布会
                    </p>
                </div>
                <div>
                    <div class="video-img">
                        <img src="./img/mi15.webp" alt="">
                        <div class="btn">
                            <div class="sanjiao">

                            </div>
                        </div>
                    </div>
                    <p class="video-name">
                        Redmi 10X系列发布会
                    </p>
                    <p class="video-desc">
                        Redmi 10X系列发布会
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!--底部-->
<div class="footer">
    <div class="wrap">
        <div class="footer-service">
            <ul>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fas fa-cog"></i>
                        <span>预约维修服务</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-link">
            <ul>
                <li>帮助中心</li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
            <div class="footer-aside">
                <p class="tel">100-400-5678</p>
                <p class="time">8:00-18:00</p>
                <a class="kefu" href="#">人工客服</a>
                <div class="follow">
                    关注小米：
                    <i class="fab fa-weibo"></i>
                    <i class="fab fa-weixin"></i>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
